<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>flex-shrink防止收缩</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .main {
      width: 600px;
      margin: 0 auto;
      border: 1px solid #000;
    }
    .flex-wrapper {
      display: flex;
      height: 100px;
      border: 2px solid #039145;
      gap: 20px;
      padding: 10px;
      justify-content: center;
      align-items: center;
    }
    .item-round {
      width: 50px;
      height: 50px;
      background: #ccc;
      border-radius: 50%;
      border: 1px solid #f0f;
    }
    .item-round1 {
      flex-shrink: 0;
    }
    .item-center {
      width: 350px;
      height: 50px;
      background: #ccc;
      border-radius: 25px;
      border: 1px solid #f0f;
    }
    .form-content {
      padding: 5px;
    }
  </style>
</head>
<body style="display: flex;">
  <div class="main">
    <h2>正常设置宽高效果</h2>
    <div class="flex-wrapper" id="box">
      <div class="item item-round"></div>
      <div class="item item-center"></div>
      <div class="item item-round"></div>
    </div>
    
    <form action="" class="form-content">
      <label>
        <input id="range" type="range" min="200" max="600" value="600" style="width: 300px;" />
        <span id="rangeValue">600px</span>
      </label>
    </form>
  </div>
  <div class="main">
    <h2>设置了flex-shrink: 0的效果</h2>
    <div class="flex-wrapper" id="box1">
      <div class="item item-round item-round1"></div>
      <div class="item item-center"></div>
      <div class="item item-round item-round1"></div>
    </div>
    
    <form action="" class="form-content">
      <label>
        <input id="range1" type="range" min="200" max="600" value="600" style="width: 300px;" />
        <span id="rangeValue1">600px</span>
      </label>
    </form>
  </div>
 
 
  
  <script>
    window.onload = function () {
      const boxDom = document.querySelector('#box');
      const rangeDom = document.querySelector('#range');
      const rangeValueDom = document.querySelector('#rangeValue');
      
      rangeDom.addEventListener('input', function () {
        const width = this.value;
        boxDom.style.width = width + 'px';
        rangeValueDom.innerHTML = width + 'px';
      })
      
      const boxDom1 = document.querySelector('#box1');
      const rangeDom1 = document.querySelector('#range1');
      const rangeValueDom1 = document.querySelector('#rangeValue1');
      
      rangeDom1.addEventListener('input', function () {
        const width = this.value;
        boxDom1.style.width = width + 'px';
        rangeValueDom1.innerHTML = width + 'px';
      })
    }
  </script>
</body>
</html>